<template>
  <div class="contains">
    <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
      <a-breadcrumb-item>个人中心</a-breadcrumb-item>
      <a-breadcrumb-item>我的交易</a-breadcrumb-item>
    </a-breadcrumb>
    <a-typography-title :level="4">我的交易记录</a-typography-title>
    <!-- 查询条件 -->
    <a-form :label-col="{ span: 0 }" :wrapper-col="{ span: 2 }">
      <a-form-item label="我的角色">
        <a-select v-model:value="tradeRoleList[roleIndex]" @change="handleChange">
          <a-select-option :value="item" v-for="item in tradeRoleList">{{ item }}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

    <a-table
      :dataSource="viewRecordList"
      :row-key="(record) => record.trade_id"
      :columns="columns"
      bordered
    >
      <template #default_id="{ text }">
        {{
        text == 0
        ? "未违约"
        : text == 1
        ? "买方违约"
        : text == 2
        ? "卖方违约"
        : text == 3
        ? "双方均违约"
        : "空"
        }}
      </template>
      <template #opr="{ record }">
        <a-button type="link" @click="showBlockInfo(record)">区块信息</a-button>
      </template>
    </a-table>

    <div>
      <!-- 区块信息弹窗 -->
      <a-modal v-model:visible="isVisible" title="区块信息" @ok="closeWindow" width="90%">
        <div>
          <a-descriptions bordered style="margin: 10px" layout="vertical">
            <a-descriptions-item label="区块哈希值" :span="3">
              {{
              blockInfo.block_hash
              }}
            </a-descriptions-item>
            <a-descriptions-item label="父区块哈希值" :span="3">
              {{
              blockInfo.block_pre_hash
              }}
            </a-descriptions-item>
            <a-descriptions-item label="区块高度">
              {{
              blockInfo.block_height
              }}
            </a-descriptions-item>
            <a-descriptions-item label="nonce">
              {{
              blockInfo.nonce
              }}
            </a-descriptions-item>
            <a-descriptions-item label="difficulty">
              {{
              blockInfo.difficulty
              }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed, nextTick, createVNode } from "vue";

//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";

//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob, put, tip, removeLocalToken } from "@/common";

//引入搜索图标
import {
  SearchOutlined,
  ExclamationCircleOutlined
} from "@ant-design/icons-vue";

import { Modal } from "ant-design-vue";

//获取路由器对象
const router = useRouter();

const columns = [
  {
    title: "交易ID",
    dataIndex: "trade_id",
    ellipsis: true
  },
  {
    title: "买方ID",
    dataIndex: "buyer",
    ellipsis: true
  },
  {
    title: "卖方ID",
    dataIndex: "seller",
    ellipsis: true
  },
  {
    title: "撮合时间",
    dataIndex: "trade_time"
  },
  {
    title: "成交价/分",
    dataIndex: "price"
  },
  {
    title: "成交电量",
    dataIndex: "contract_elec"
  },
  {
    title: "卖方实际出电量/千瓦时",
    dataIndex: "output_elec"
  },
  {
    title: "买方实际用电量/千瓦时",
    dataIndex: "use_elec"
  },
  {
    title: "交割状态",
    dataIndex: "trade_state_name"
  },
  {
    title: "违约状态",
    dataIndex: "default_id",
    slots: {
      customRender: "default_id"
    }
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr" //定义插槽，and bugs all caused by your careless
    }
  }
];

const viewRecordList = ref([]);
const buyRecordList = ref([]);
const getBuyRecord = () => {
  get("/info/user/buy").then(res => {
    buyRecordList.value = res.data;
    viewRecordList.value = buyRecordList.value;
  });
};
getBuyRecord();

const sellRecordList = ref([]);
const getSellRecord = () => {
  get("/info/user/sell").then(res => {
    sellRecordList.value = res.data;
  });
};
getSellRecord();

let tradeRoleList = new Array("买方", "卖方");
let roleIndex = 0;
const handleChange = () => {
  if (roleIndex == 0) {
    roleIndex = 1;
    viewRecordList.value = sellRecordList.value;
  } else {
    roleIndex = 0;
    viewRecordList.value = buyRecordList.value;
  }
};

const isVisible = ref(false);
const closeWindow = () => {
  isVisible.value = false;
};
const blockInfo = ref({});
const showBlockInfo = record => {
  isVisible.value = true;
  blockInfo.value = record;
};
</script>

<style scoped>
.contains {
  padding: 10px;
}
</style>